<template>
    <div class="jianzhan-content">
        <Crumb name="寄售合同"></Crumb>
        <div class="content">
            <el-button type="primary" size="small" class="input" icon="el-icon-plus" @click="openAdd">添加寄售合同</el-button>
            <div class="table-wrapper">
                <el-table
                        :data="consignmentList.filter(item=>item.contractNumber.includes(key))"
                        border
                        stripe
                        empty-text="暂无数据"
                        style="width: 100%">
                    <el-table-column
                            prop="contractNumber"
                            label="合同号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="contractDateStr"
                            label="日期"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="customer"
                            label="客户">
                    </el-table-column>
                    <el-table-column
                            prop="transportMethod"
                            label="发起方式">
                    </el-table-column>
                    <el-table-column
                            prop="totalPrice"
                            label="总金额">
                    </el-table-column>
                    <el-table-column
                            prop="marks"
                            label="备注">
                    </el-table-column>
                    <el-table-column width="350px">
                        <template slot="header" slot-scope="scope">
                            <el-input v-model="key" placeholder="查询合同号" size="small" suffix-icon="el-icon-search"></el-input>
                        </template>
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="openEdit(scope.row)">查看或编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
                title="寄售合同"
                :visible.sync="dialogVisible"
                width="80%"
                >
            <el-form ref="form" :model="consignment" :rules="rule" label-width="150px" inline style="text-align: left">
                <el-form-item label="合同号" prop="contractNumber">
                    <el-input v-model="consignment.contractNumber" placeholder="合同编号" size="small" ></el-input>
                </el-form-item>
                <el-form-item label="日期" prop="contractDateStr">
                    <el-date-picker value-format="yyyy-MM-dd" size="small" v-model="consignment.contractDateStr" placeholder="请选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="客户">
                    <el-input v-model="consignment.customer" placeholder="客户" size="small"></el-input>
                </el-form-item>
                <el-form-item label="发运方式">
                    <el-input v-model="consignment.transportMethod" placeholder="发运方式" size="small"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="consignment.marks" size="small" type="textarea" placeholder="备注"></el-input>
                </el-form-item>
                <div style="margin-bottom: 20px">
                    <label for="file" class="label-btn">上传明细</label>
                    <input type="file" @change="fileChange" id="file" v-show="false" ref="file">
                </div>
                <div class="table">
                    <el-table
                            :data="partList"
                            stripe
                            border
                            height="500px"
                            style="width:95%">
                        <el-table-column
                                prop="partsNumber"
                                label="配件编号"
                                >
                        </el-table-column>
                        <el-table-column
                                prop="denomination"
                                label="中文"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="designation"
                                label="英文">
                        </el-table-column>
                        <el-table-column
                                prop="quantity"
                                label="数量">
                        </el-table-column>
                        <el-table-column
                                prop="unit"
                                label="单位">
                        </el-table-column>
                        <el-table-column
                                prop="salesUnitPrice"
                                label="单价">
                        </el-table-column>
                        <el-table-column
                                prop="totalPrice"
                                label="总价">
                        </el-table-column>

                    </el-table>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import {getContractList,addContract,modContract,contractFile,getContractDetail} from "../../api/contract";
    import {ERROR_OK} from "../../util/config";
    import {partList} from "../../store/getters";

    export default {
        name: "consignment",
        data(){
            return {
                consignmentList:[],
                dialogVisible:false,
                consignment:{
                    contractNumber:'',
                    contractDateStr:'',
                    totalPrice:'',
                    customer:'',
                    transportMethod:'',
                    marks:''
                },
                key:'',
                rule:{
                    contractNumber:[{required:true,message:'合同号必需填写'}],
                    contractDateStr:[{required:true,message:'日期必须选择'}]
                },
                partList:[]
            }
        },
        created(){
            this.getConsignmentList()
        },
        methods:{
            async fileChange(e){
                const formData = new FormData();
               Array.prototype.forEach.call(e.target.files, item=>{
                   formData.append('exFiles',item)
               });
                const {status,data} = await contractFile(formData);
                if (status === 0 ) {
                   this.partList = data.data.consignmentOrderDetailList;
                   this.consignment.totalPrice = data.data.totalSparePartsPrice
                }
                this.$nextTick(()=>{
                    this.$refs.file.value = '';
                })
            },
            openAdd(){
                this.dialogVisible = true;
                this.clear()
            },
            clear(){
                this.consignment = {
                    contractNumber:'',
                    contractDateStr:'',
                    customer:'',
                    transportMethod:'',
                    marks:'',
                    totalPrice:'',
                    id:''
                };
                this.partList = [];
            },
            async openEdit(row){
                const {status,data} = await getContractDetail(row.id);
                if (status === ERROR_OK) {
                    this.consignment = row;
                    this.partList = data.map(item => {
                        return {
                            partsNumber:item.spareParts.partsNumber,
                            denomination:item.spareParts.denomination,
                            designation:item.spareParts.designation,
                            quantity:item.quantity,
                            unit:item.unit,
                            salesUnitPrice:item.salesUnitPrice,
                            partsId:item.spareParts.id,
                            totalPrice:item.totalLinePrice
                        }
                    });
                    this.dialogVisible = true
                }
            },
            submitForm(){
                this.$refs.form.validate(async valid=>{
                    if (valid) {
                        const {contractNumber,contractDateStr,customer,transportMethod,marks,id,totalPrice} = this.consignment;
                        if(!partList.length){
                            this.$notify.error('合同必须有配件信息')
                        }
                        let consignmentOrderDetails = this.partList.map(item => {
                            return {
                                partsId:item.partsId,
                                quantity:item.quantity,
                                salesUnitPrice:item.salesUnitPrice,
                                unit:item.unit
                            }
                        });
                        consignmentOrderDetails = JSON.stringify(consignmentOrderDetails);
                        if(id){
                            const {status,msg} = await modContract({contractNumber,contractDateStr,customer,transportMethod,marks,consignmentOrderDetails,id,totalPrice})
                            if(status === 0 ) {
                                this.$notify.success('修改寄售合同成功')
                                this.clear();
                                this.dialogVisible = false
                            } else {
                                this.$notify.error(msg)
                            }
                        } else {
                            const {status,msg} = await addContract({contractNumber,contractDateStr,customer,transportMethod,marks,consignmentOrderDetails,totalPrice});
                            if(status === ERROR_OK) {
                                this.$notify.success('增加寄售合同成功');
                                this.clear();
                                this.dialogVisible = false
                                this.getConsignmentList()
                            } else {
                                this.$notify.error(msg)
                            }
                        }

                    }
                })
            },
            async getConsignmentList(){
                const {status,data} = await getContractList();
                if (status === ERROR_OK) {
                    this.consignmentList = data?data:[];
                } else {
                    this.consignmentList = [];
                    this.$notify.warning('没有寄售合同数据')
                }
            }
        },
        components:{
            Crumb
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content{
        @include content
    }
    .label-btn{
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: white;
        background-color: #409eff;
        border-radius: 3px;
        padding: 5px 15px;
        display: block;
        width: 120px;
    }
</style>